import { h, defineComponent, markRaw, TransitionGroup } from 'vue'
import ContainerNode from '../../ItemNode/ContainerNode'
import classes from '../../ItemNode/ItemNode.module.css'
import {
  ElButton,
  ElColorPicker,
  ElInput,
  ElPopover,
  ElRadioButton,
  ElRadioGroup,
  ElText
} from 'element-plus'
import classesNFlex from './NFlex.module.css'

const borders = import.meta.glob('./borders/*.vue', { import: 'default', eager: true })
const borderRaws = import.meta.glob('./borders/*.vue', {
  query: '?raw',
  import: 'default',
  eager: true
})

export default class NFlex extends ContainerNode {
  isNFlex = true
  isLayoutNode = true
  styleDisplay = 'flex'

  constructor(node?: NFlex) {
    super(node)

    if (!node) {
      this.path = './components/NFlex/NFlex.tsx'
      this.name = 'flex容器'

      const style = this.props.style
      this.props.style = {
        ...style,
        display: this.styleDisplay,
        flexWrap: 'nowrap',
        flexDirection: 'row',
        justifyContent: 'start',
        alignContent: 'start',
        alignItems: 'start',
        rowGap: '0px',
        columnGap: '0px'
      }

      this.props.border = './borders/Border.vue'
    }

    const pComponent = this.component
    this.component = markRaw(
      defineComponent(
        (props) => {
          return () => (
            <pComponent>
              {h(borders[this.props.border], {
                color: this.props.style.borderColor
              })}
              <TransitionGroup name="list">
                {() => this.children.map((child, i) => h(child.component, { key: child.uuid }))}
              </TransitionGroup>
            </pComponent>
          )
        },
        {
          name: 'NFlex'
        }
      )
    )

    const pView = this.view
    this.view = markRaw(
      defineComponent((props) => {
        return () => <pView></pView>
      })
    )

    const pParams = this.params
    this.params = markRaw(
      defineComponent((props, { slots }) => {
        return () => (
          <pParams>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                边框色
              </ElText>
              <div class={classes['params-item-content']}>
                <ElColorPicker
                  modelValue={this.props.style.borderColor}
                  onUpdate:modelValue={(v) =>
                    (this.props.style.borderColor = v || 'rgba(0, 0, 0, 0)')
                  }
                  show-alpha
                  size="small"
                  teleported={false}
                ></ElColorPicker>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                换行
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup
                  modelValue={this.props.style.flexWrap}
                  onUpdate:modelValue={(v) => (this.props.style.flexWrap = v)}
                >
                  <ElRadioButton value="wrap" label="换行" size="small"></ElRadioButton>
                  <ElRadioButton value="nowrap" label="不换行" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                主轴方向
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.flexDirection}>
                  <ElRadioButton value="row" label="文本方向/横向" size="small"></ElRadioButton>
                  <ElRadioButton value="row-reverse" label="反横向" size="small"></ElRadioButton>
                  <ElRadioButton value="column" label="块方向/纵向" size="small"></ElRadioButton>
                  <ElRadioButton value="column-reverse" label="反纵向" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                主轴内容对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.justifyContent}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="space-around" label="半均分" size="small"></ElRadioButton>
                  <ElRadioButton value="space-evenly" label="均分" size="small"></ElRadioButton>
                  <ElRadioButton
                    value="space-between"
                    label="两端对齐"
                    size="small"
                  ></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                交叉轴子项对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.alignItems}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="stretch" label="填满" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                交叉轴内容对齐
              </ElText>
              <div class={classes['params-item-content']}>
                <ElRadioGroup v-model={this.props.style.alignContent}>
                  <ElRadioButton value="start" label="起" size="small"></ElRadioButton>
                  <ElRadioButton value="center" label="中" size="small"></ElRadioButton>
                  <ElRadioButton value="end" label="止" size="small"></ElRadioButton>
                  <ElRadioButton value="space-around" label="半均分" size="small"></ElRadioButton>
                  <ElRadioButton value="space-evenly" label="均分" size="small"></ElRadioButton>
                </ElRadioGroup>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                行间距
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.style.rowGap} size="small"></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                列间距
              </ElText>
              <div class={classes['params-item-content']}>
                <ElInput v-model={this.props.style.columnGap} size="small"></ElInput>
              </div>
            </div>
            <div class={classes['params-item']}>
              <ElText class={classes['params-item-label']} type="info">
                边框
              </ElText>
              <div class={classes['params-item-content']}>
                <ElPopover trigger="click" teleported={false} placement="bottom" width="unset">
                  {{
                    reference: () => (
                      <ElButton type="primary" size="small">
                        选择
                      </ElButton>
                    ),
                    default: () =>
                      h(
                        'div',
                        {
                          class: classesNFlex['params-border-box']
                        },
                        Object.keys(borders).map((key) =>
                          h(
                            'div',
                            {
                              class: classesNFlex['params-border-item'],
                              onClick: () => (this.props.border = key)
                            },
                            h(borders[key], { color: this.props.border == key ? '#07f' : '#999' })
                          )
                        )
                      )
                  }}
                </ElPopover>
              </div>
            </div>
            {slots.default?.()}
          </pParams>
        )
      })
    )
  }

  toVue(): SfcObj {
    const sfcObj = super.toVue()

    const imports = {}
    const importFiles = {}

    const defaultBorderName = this.props.border.match(/\.\/borders\/(\w+)\.vue/)[1]
    imports[`./imports/${defaultBorderName}.vue`] = {
      default: defaultBorderName
    }

    for (let key in borderRaws) {
      importFiles[key.replace('./borders/', '')] = borderRaws[key]
    }

    sfcObj.imports = {
      ...sfcObj.imports,
      ...imports
    }

    sfcObj.importFiles = {
      ...sfcObj.importFiles,
      ...importFiles
    }

    sfcObj.template = sfcObj.template.replace(
      '<slot></slot>',
      `
  <${defaultBorderName} color="${this.props.style.borderColor}"></${defaultBorderName}>
  ${this.children.map((child) => child.uuid).join('\n  ')}
      `
    )

    return sfcObj
  }
}
